<template>
  <div class="funcgroup1">

    <div style="display: flex;flex-direction: row;">
      <a class="uploadFile" onclick="document.getElementById('fileInput1').click();"
        style="cursor: pointer;margin-top: 10px;margin-left: 2.5vw;width: 30vw; text-decoration: none;"><input
          id="fileInput1" type="file" multiple="multiple" ref="filElem" style="display: none" />
        <div style="text-align: center;border:3px dotted skyblue;border-radius: 4px;">
          <div style="font-size: 40px;">+</div>
          <div style="margin-bottom: 20px;">频次百分比</div>
        </div>
        <p id="fileName1">格式1Excel表格未上传</p>
      </a>
      <a class="uploadFile" onclick="document.getElementById('fileInput2').click();"
        style="cursor: pointer;margin-top: 10px;margin-left: 2.5vw;width: 30vw; text-decoration: none;"><input
          id="fileInput2" type="file" multiple="multiple" ref="filElem" style="display: none" />
        <div style="text-align: center;border:3px dotted skyblue;border-radius: 4px;">
          <div style="font-size: 40px;">+</div>
          <div style="margin-bottom: 20px;">均值</div>
        </div>
        <p id="fileName2">格式2Excel表格未上传</p>
      </a>
      <a class="uploadFile" onclick="document.getElementById('fileInput3').click();"
        style="cursor: pointer;margin-top: 10px;margin-left: 2.5vw;width: 30vw; text-decoration: none;"><input
          id="fileInput3" type="file" multiple="multiple" ref="filElem" style="display: none" />
        <div style="text-align: center;border:3px dotted skyblue;border-radius: 4px;">
          <div style="font-size: 40px;">+</div>
          <div style="margin-bottom: 20px;">标准差</div>
        </div>
        <p id="fileName3">格式3Excel表格未上传</p>
      </a>
      <a class="uploadFile" onclick="document.getElementById('fileInput4').click();"
        style="cursor: pointer;margin-top: 10px;margin-left: 2.5vw;width: 30vw; text-decoration: none;"><input
          id="fileInput4" type="file" multiple="multiple" ref="filElem" style="display: none" />
        <div style="text-align: center;border:3px dotted skyblue;border-radius: 4px;">
          <div style="font-size: 40px;">+</div>
          <div style="margin-bottom: 20px;">正态分布检验</div>
        </div>
        <p id="fileName4">格式4Excel表格未上传</p>
      </a>
      <a class="uploadFile" onclick="document.getElementById('fileInput5').click();"
        style="cursor: pointer;margin-top: 10px;margin-left: 2.5vw;width: 30vw; text-decoration: none;"><input
          id="fileInput5" type="file" multiple="multiple" ref="filElem" style="display: none" />
        <div style="text-align: center;border:3px dotted skyblue;border-radius: 4px;">
          <div style="font-size: 40px;">+</div>
          <div style="margin-bottom: 20px;">方差齐性检验</div>
        </div>
        <p id="fileName5">格式5Excel表格未上传</p>
      </a>
      <a class="uploadFile" onclick="document.getElementById('fileInput6').click();"
        style="cursor: pointer;margin-top: 10px;margin-left: 2.5vw;width: 30vw; text-decoration: none;"><input
          id="fileInput6" type="file" multiple="multiple" ref="filElem" style="display: none" />
        <div style="text-align: center;border:3px dotted skyblue;border-radius: 4px;">
          <div style="font-size: 40px;">+</div>
          <div style="margin-bottom: 20px;">方差分析</div>
        </div>
        <p id="fileName6">格式6Excel表格未上传</p>
      </a>
    </div>
    <div style="display: flex;flex-direction: row;">
      <a class="uploadFile" onclick="document.getElementById('fileInput7').click();"
        style="cursor: pointer;margin-top: 10px;margin-left: 2.5vw;width: 30vw; text-decoration: none;"><input
          id="fileInput7" type="file" multiple="multiple" ref="filElem" style="display: none" />
        <div style="text-align: center;border:3px dotted skyblue;border-radius: 4px;">
          <div style="font-size: 40px;">+</div>
          <div style="margin-bottom: 20px;">t检验</div>
        </div>
        <p id="fileName7">格式7Excel表格未上传</p>
      </a>
      <a class="uploadFile" onclick="document.getElementById('fileInput8').click();"
        style="cursor: pointer;margin-top: 10px;margin-left: 2.5vw;width: 30vw; text-decoration: none;"><input
          id="fileInput8" type="file" multiple="multiple" ref="filElem" style="display: none" />
        <div style="text-align: center;border:3px dotted skyblue;border-radius: 4px;">
          <div style="font-size: 40px;">+</div>
          <div style="margin-bottom: 20px;">非参检验</div>
        </div>
        <p id="fileName8">格式8Excel表格未上传</p>
      </a>
      <a class="uploadFile" onclick="document.getElementById('fileInput9').click();"
        style="cursor: pointer;margin-top: 10px;margin-left: 2.5vw;width: 30vw; text-decoration: none;"><input
          id="fileInput9" type="file" multiple="multiple" ref="filElem" style="display: none" />
        <div style="text-align: center;border:3px dotted skyblue;border-radius: 4px;">
          <div style="font-size: 40px;">+</div>
          <div style="margin-bottom: 20px;">回归分析</div>
        </div>
        <p id="fileName9">格式9Excel表格未上传</p>
      </a>
      <a class="uploadFile" onclick="document.getElementById('fileInput10').click();"
        style="cursor: pointer;margin-top: 10px;margin-left: 2.5vw;width: 30vw; text-decoration: none;"><input
          id="fileInput10" type="file" multiple="multiple" ref="filElem" style="display: none" />
        <div style="text-align: center;border:3px dotted skyblue;border-radius: 4px;">
          <div style="font-size: 40px;">+</div>
          <div style="margin-bottom: 20px;">聚类分析</div>
        </div>
        <p id="fileName10">格式10Excel表格未上传</p>
      </a>
      <a class="uploadFile" onclick="document.getElementById('fileInput11').click();"
        style="cursor: pointer;margin-top: 10px;margin-left: 2.5vw;width: 30vw; text-decoration: none;"><input
          id="fileInput11" type="file" multiple="multiple" ref="filElem" style="display: none" />
        <div style="text-align: center;border:3px dotted skyblue;border-radius: 4px;">
          <div style="font-size: 40px;">+</div>
          <div style="margin-bottom: 20px;">卡方检验</div>
        </div>
        <p id="fileName11">格式11Excel表格未上传</p>
      </a>
      <a class="uploadFile" onclick="document.getElementById('fileInput12').click();"
        style="cursor: pointer;margin-top: 10px;margin-left: 2.5vw;width: 30vw; text-decoration: none;"><input
          id="fileInput12" type="file" multiple="multiple" ref="filElem" style="display: none" />
        <div style="text-align: center;border:3px dotted skyblue;border-radius: 4px;">
          <div style="font-size: 40px;">+</div>
          <div style="margin-bottom: 20px;">关联规则</div>
        </div>
        <p id="fileName12">格式12Excel表格未上传</p>
      </a>
    </div> <button @click="uploadFile()"
      v-if="file1 || file2 || file3 || file4 || file5 || file6 || file7 || file8 || file9 || file10 || file11 || file12">上传并开始数据分析</button>
    <div style="display: flex;">   <div v-show="t1||e1" class="label1">频次百分比</div>
      <v-chart v-show="t1" style="float: left;width: 33vw;height: 300px;" :option="option1" />
    </div>
    <div style="display: flex;">   <div v-show="t2||e2" class="label1">均值</div>
      <v-chart v-show="t2" style="float: left;width: 33vw;height: 300px;" :option="option2" />
    </div>
    <div style="display: flex;">   <div v-show="t3||e3" class="label1">标准差</div>
      <v-chart v-show="t3" style="float: left;width: 33vw;height: 300px;" :option="option3" />
    </div>
    <div style="display: flex;">   <div v-show="t4||e4" class="label1">正态分布检验</div>
      <v-chart v-show="t4" style="float: left;width: 33vw;height: 300px;" :option="option4" />
    </div>
    <div style="display: flex;">   <div v-show="t5||e5" class="label1">方差齐性检验</div>
      <!-- <v-chart v-show="t5" style="float: left;width: 33vw;height: 300px;" :option="option5" /> -->
      <table v-show="t5" style="">
        <tr>
          <td>F</td>
          <td>{{ data5f }}</td>
        </tr>
        <tr>
          <td>P</td>
          <td>{{ data5p }}</td>
        </tr>
      </table>
    </div>
    <div style="display: flex;">   <div v-show="t6||e6" class="label1">方差分析</div>
      <!-- <v-chart v-show="t6" style="float: left;width: 33vw;height: 300px;" :option="option6" /> -->
      <table v-show="t6" style="">
        <tr>
          <td>F</td>
          <td>{{ data6f }}</td>
        </tr>
        <tr>
          <td>P</td>
          <td>{{ data6p }}</td>
        </tr>
      </table>
    </div>
    <div style="display: flex;">   <div v-show="t7||e7" class="label1">t检验</div>
      <!-- <v-chart v-show="t7" style="float: left;width: 33vw;height: 300px;" :option="option7" /> -->
      <table v-show="t7" style="">
        <tr>
          <td>两两比较</td>
          <td>t</td>
          <td>p</td>
          <td>df</td>
        </tr>
        <tr>
          <td>{{ data7name[0] }}</td>
          <td>{{ data7t[0] }}</td>
          <td>{{ data7p[0] }}</td>
          <td>{{ data7df[0] }}</td>
        </tr>        <tr>
          <td>{{ data7name[1] }}</td>
          <td>{{ data7t[1] }}</td>
          <td>{{ data7p[1] }}</td>
          <td>{{ data7df[1] }}</td>
        </tr>        <tr>
          <td>{{ data7name[2] }}</td>
          <td>{{ data7t[2] }}</td>
          <td>{{ data7p[2] }}</td>
          <td>{{ data7df[2] }}</td>
        </tr>
      </table>
    </div>
    <div style="display: flex;">              <div v-show="t8||e8" class="label1">非参检验</div>
      <v-chart v-show="t8" style="float: left;width: 33vw;height: 300px;" :option="option8" />
            <table v-show="t8" style="">
        <tr>
          <td>两两比较</td>
          <td>u</td>
          <td>z</td>
          <td>p</td>
        </tr>
        <tr>
          <td>{{ data8name[0] }}</td>
          <td>{{ data8u[0] }}</td>
          <td>{{ data8z[0] }}</td>
          <td>{{ data8p[0] }}</td>
        </tr>        <tr>
          <td>{{ data8name[1] }}</td>
          <td>{{ data8u[1] }}</td>
          <td>{{ data8z[1] }}</td>
          <td>{{ data8p[1] }}</td>
        </tr>        <tr>
          <td>{{ data8name[2] }}</td>
          <td>{{ data8u[2] }}</td>
          <td>{{ data8z[2] }}</td>
          <td>{{ data8p[2] }}</td>
        </tr>
      </table>
    </div>
    <div  style="display: flex;">
              <div v-show="t9||e9" class="label1">回归分析</div>
              <h2 v-show="e9">{{ e9 }}</h2>
        <v-chart v-show="t9"  style="float: left;width: 33vw;height:300px;" :option="option9" />
              <table v-show="t9">
        <tr>
          <td>截距(β₀)</td>
          <td>{{ t9_1 }}</td>
        </tr>
        <tr>
          <td>斜率(β₁)</td>
          <td>{{ t9_2 }}</td>
        </tr>
                <tr>
          <td>决定系数(R²)</td>
          <td>{{ t9_3 }}</td>
        </tr>
                <tr>
          <td>P</td>
          <td>{{ t9_4 }}</td>
        </tr>
                <tr>
          <td>显著性</td>
          <td>{{ t9_5 }}</td>
        </tr>
                <tr>
          <td>回归方程</td>
          <td>{{ t9_6 }}</td>
        </tr>
      </table>

   
    </div>
    <div style="display: flex;">
      <v-chart v-show="t10" style="float: left;width: 33vw;height: 300px;" :option="option10" />

    </div>
    <div style="display: flex;">
      <div v-show="t11">

<table v-show="t11">
        <tr>
          <td>卡方值(χ²)</td>
          <td>{{ t11k2 }}</td>
        </tr>
        <tr>
          <td>自由度(dof)</td>
          <td>{{  t11df }}</td>
        </tr>
                <tr>
          <td>P</td>
          <td>{{  t11p }}</td>
        </tr>
                <tr>
          <td>是否具有统计学意义</td>
          <td>{{ t11significant }}</td>
        </tr>
                <tr>
          <td>说明</td>
          <td>{{  t11interpretation  }}</td>
        </tr>
      </table>


        <!-- <span class="subTitle">卡方值(χ²):</span><span class="subTitleContent">{{ t11k2 }}</span>
        <span class="subTitle">自由度(dof):</span><span class="subTitleContent">{{ t11df }}</span>
        <span class="subTitle">P:</span><span class="subTitleContent">{{ t11p }}</span>
        <span class="subTitle">是否具有统计学意义:</span><span class="subTitleContent">{{ t11significant }}</span><span
          class="subTitleContent">{{ t11interpretation }}</span>// -->
      </div>
    </div>
    <!-- 关联规则指标面板 -->
    <div v-show="t12" class="association-metrics-panel">
      <h3>关联规则分析结果</h3>
      <div class="metrics-grid">
        <div class="metric-card" v-for="(rule, index) in associationRules" :key="index">
          <div class="rule-header">{{ rule.规则 }}</div>
          <div class="metric-item">
            <span class="label">支持度:</span>
            <span class="value">{{ rule.支持度 }}</span>
          </div>
          <div class="metric-item">
            <span class="label">置信度:</span>
            <span class="value">{{ rule.置信度 }}</span>
          </div>
          <div class="metric-item">
            <span class="label">提升度:</span>
            <span class="value">{{ rule.提升度 }}</span>
          </div>
          <div class="metric-item">
            <span class="label">关系:</span>
            <span class="value" :class="getRelationClass(rule.关系)">{{ rule.关系 }}</span>
          </div>
        </div>
      </div>
    </div>
    <progress id="uploadProgress" value="0" max="100" style="display: none; width: 200px;"></progress>
  </div>
</template>
<script>
import VChart from 'vue-echarts';
import * as echarts from 'echarts/core';
// 导入所有用到的图表类型
import { SankeyChart, ParallelChart, HeatmapChart, GraphChart } from 'echarts/charts';
// 导入所有用到的组件
import { GridComponent, TooltipComponent, LegendComponent, VisualMapComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([
  SankeyChart,
  ParallelChart,
  HeatmapChart,
  GraphChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  VisualMapComponent,
  CanvasRenderer
]);
export default {
  components: {
    'v-chart': VChart
  },
  data() {
    return {
      file1: 0, file2: 0, file3: 0, file4: 0, file5: 0, file6: 0, file7: 0, file8: 0, file9: 0, file10: 0, file11: 0, file12: 0, t1: false, t2: false, t3: false, t4: false, t5: false, t6: false, t7: false, t8: false, t9: false, t10: false, t11: false, t12: false, data1: 0, data2name: 0, data2value: 0, data3name: 0, data3value: 0, data4name: 0, data4w: 0, data4p: 0, data5: 0, data5f: 0, data5p: 0, data6f: 0, data6p: 0, data6: 0, data7name: 0, data7t: 0, data7p: 0, data7df: 0, data8name: 0,data8u: 0,data8z: 0,data8p: 0, data9t: 0, t9_1: 1, t9_2: 1, t9_3: 1, t9_4: 1, t9_5: 1, t9_6: 1,data10features:[],clusterData: null,  t11df: 0, t11k2: 0, t11p: 0, t11interpretation: 0, t11significant: 0, associationRules: 0,
      // 所有图表配置都放在这里
      option1: {
        title: { text: '频次分析' },
        series: [{
          type: 'pie',
          radius: ['20%', '50%'],
          data: [
            { name: '甘味', value: 35 },
            { name: '酸味', value: 25 },
          ],
          //label: { formatter: '{b}: {d}%' },
          label: { // 配置标签
            show: true, // 确保显示标签
            formatter: '{b}\n频次:{c}\n占比:{d}%' // 显示为 "直接访问: 335"
            // formatter: '{b}\n{c} ({d}%)'  // 换行显示名称、值和百分比
          },
          roseType: 'radius'
        }]
      },
      option2: {
        title: { text: '均值' },
        xAxis: { name: '数据列', data: [] }, // 初始为空，会在created中设置
        yAxis: { name: '均值' },
        series: [{
          type: 'bar',
          data: [],//数值
          itemStyle: { color: '#37A2FF' },
          label: { show: true }
        }]
      },
      option3: {
        title: { text: '标准差' },
        xAxis: { name: '数据列', data: [] }, // 初始为空，会在created中设置
        yAxis: { name: '均值' },
        series: [{
          type: 'bar',
          data: [],//数值
          itemStyle: { color: '#37A2FF' },
          label: { show: true }
        }]
      },
      option4: {
        // title: { text: 'Shapiro-Wilk正态性检验' },
        // xAxis: { name: '数据列', data: [] }, // 初始为空，会在created中设置
        // yAxis: { name: 'W/P' },
        // series: [{
        //   type: 'bar',
        //   data: [1, 2, 3, 4],//数值
        //   itemStyle: { color: '#37A2FF' },
        //   label: { show: true, formatter: 'W:{c}' }
        // }, {
        //   type: 'bar',
        //   data: [5, 6, 7, 8],//数值
        //   itemStyle: { color: '#37A2FF' },
        //   label: { show: true, formatter: 'P:{c}' }
        // }]
                title: {
          text: '基于Shapiro-Wilk检验的正态分布曲线',
          subtext: '阴影区域表示置信区间（1σ: 68.27%, 2σ: 95.45%）',
          left: 'center'
        },
        tooltip: { trigger: 'axis' },
        legend: { top: 40 },
        xAxis: { type: 'value', name: '数据值' },
        yAxis: { type: 'value', name: '概率密度' },
      },
      option5: {
        title: { text: '方差齐性检验' },
        xAxis: { name: '', data: ['F', 'P'] }, // 初始为空，会在created中设置
        yAxis: { name: 'F/P' },
        series: [{
          type: 'bar',
          data: [1, 2, 3, 4],//数值
          itemStyle: { color: '#37A2FF' },
          label: { show: true, formatter: '{b}:{c}' }
        }]
      },
      option6: {
        title: { text: '单因素方差分析' },
        xAxis: { name: '', data: ['F', 'P'] }, // 初始为空，会在created中设置
        yAxis: { name: 'F/P' },
        series: [{
          type: 'bar',
          data: [1, 2, 3, 4],//数值
          itemStyle: { color: '#37A2FF' },
          label: { show: true, formatter: '{b}:{c}' }
        }]
      },
      option7: {
        title: { text: '独立样本t检验' },
        xAxis: { name: '两列比较', data: [] }, // 初始为空，会在created中设置
        yAxis: { name: 't/P/df' },
        series: [{
          type: 'bar',
          data: [1, 2, 3, 4],//数值
          itemStyle: { color: '#37A2FF' },
          label: { show: true, formatter: 't:{c}' }
        }, {
          type: 'bar',
          data: [5, 6, 7, 8],//数值
          itemStyle: { color: '#37A2FF' },
          label: { show: true, formatter: 'P:{c}' }
        },
        {
          type: 'bar',
          data: [5, 6, 7, 8],//数值
          itemStyle: { color: '#37A2FF' },
          label: { show: true, formatter: 'df:{c}' }
        }]
      },
      option8: {
        grid: {
          left: '10%', // 将左边距设置为容器宽度的20%，可根据标签长度调整（如25%，30%）
          containLabel: true // 确保网格区域包含坐标轴的标签
        },
        title: { text: '非参数检验' },
        xAxis: { name: 'U/Z/P', type: 'value' }, // 初始为空，会在created中设置
        yAxis: { name: '两列比较', type: 'category' },
        series: [{
          type: 'bar',
          data: [1, 2, 3, 4],//数值
          itemStyle: { color: '#37A2FF' },
          label: { show: true, position: 'right', formatter: 'U:{c}', }
        }, {
          type: 'bar',
          data: [5, 6, 7, 8],//数值
          itemStyle: { color: '#37A2FF' },
          label: { show: true, position: 'right', formatter: 'Z:{c}' }
        },
        {
          type: 'bar',
          data: [5, 6, 7, 8],//数值
          itemStyle: { color: '#37A2FF' },
          label: { show: true, position: 'right', formatter: 'P:{c}' }
        }]
      },
      option9: {
        title: { text: '回归分析测试 - 确保坐标轴范围包含标记线' },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'value',
          min: 0,    // 明确设置X轴最小值
         // max: 15     // 明确设置X轴最大值，确保覆盖标记线的X坐标
        },
        yAxis: {
          type: 'value',
          min: 0,    // 明确设置Y轴最小值
          //max: 15     // 明确设置Y轴最大值，确保覆盖标记线的Y坐标
        },
        series: [{
          name: '数据点',
          type: 'scatter',
          data: [[1, 2], [3, 4], [5, 6], [7, 8]], // 简单的测试数据
          symbolSize: 10,
        },
        {
          name: '回归直线',
          type: 'line',
          data: [
            [0, 1],
            [1, 0]
          ],
          symbol: 'none', // 不显示数据点标记
          lineStyle: {
            color: '#FF0000',
            width: 2
          }

        }]
      },
      // 聚类中心雷达图（推荐首选）
      option10: {
        title: { text: '患者症状聚类特征(max值需商榷，负数问题)' },
        tooltip: { trigger: 'item' },
        radar: {
          indicator: [
            { name: '胃脘疼痛' },
            { name: '食欲不振' },
            { name: '嗳气反酸' },
            { name: '腹胀' },
            { name: '乏力' },
            { name: '畏寒' }
          ]
        },
        series: [{
          type: 'radar',
          data: [
            {
              value: [2.5, 2.0, 1.5, 1.0, 2.0, 1.5],
              name: 'Cluster-1 (n=2)',
              areaStyle: { color: 'rgba(84, 112, 198, 0.6)' }
            },
            {
              value: [1.67, 2.33, 3.0, 2.0, 2.33, 2.33],
              name: 'Cluster-2 (n=3)',
              areaStyle: { color: 'rgba(145, 204, 117, 0.6)' }
            }
          ]
        }]
      },
    }
  },
  mounted() {
    document.getElementById('fileInput1').addEventListener('change', (event) => {
      if (this.file1 != event.target.files[0]) this.t1 = false;
      this.file1 = event.target.files[0];
      if (this.file1) {
        document.getElementById('fileName1').textContent = '✓已选择文件: ' + this.file1.name;
        console.log("文件已选择");
      } else {
        document.getElementById('fileName1').textContent = '格式1Excel表格未上传';
      }
    });
    document.getElementById('fileInput2').addEventListener('change', (event) => {
      if (this.file2 != event.target.files[0]) this.t2 = false;
      this.file2 = event.target.files[0];
      if (this.file2) {
        document.getElementById('fileName2').textContent = '✓已选择文件: ' + this.file2.name;
        console.log("文件已选择");
      } else {
        document.getElementById('fileName2').textContent = '格式2Excel表格未上传';
      }
    });
    document.getElementById('fileInput3').addEventListener('change', (event) => {
      if (this.file3 != event.target.files[0]) this.t3 = false;
      this.file3 = event.target.files[0];
      if (this.file3) {
        document.getElementById('fileName3').textContent = '✓已选择文件: ' + this.file3.name;
        console.log("文件已选择");
      } else {
        document.getElementById('fileName3').textContent = '格式3Excel表格未上传';
      }
    });
    document.getElementById('fileInput4').addEventListener('change', (event) => {
      if (this.file4 != event.target.files[0]) this.t4 = false;
      this.file4 = event.target.files[0];
      if (this.file4) {
        document.getElementById('fileName4').textContent = '✓已选择文件: ' + this.file4.name;
        console.log("文件已选择");
      } else {
        document.getElementById('fileName4').textContent = '格式4Excel表格未上传';
      }
    });
    document.getElementById('fileInput5').addEventListener('change', (event) => {
      if (this.file5 != event.target.files[0]) this.t5 = false;
      this.file5 = event.target.files[0];
      if (this.file5) {
        document.getElementById('fileName5').textContent = '✓已选择文件: ' + this.file5.name;
        console.log("文件已选择");
      } else {
        document.getElementById('fileName5').textContent = '格式5Excel表格未上传';
      }
    });
    document.getElementById('fileInput6').addEventListener('change', (event) => {
      if (this.file6 != event.target.files[0]) this.t6 = false;
      this.file6 = event.target.files[0];
      if (this.file6) {
        document.getElementById('fileName6').textContent = '✓已选择文件: ' + this.file6.name;
        console.log("文件已选择");
      } else {
        document.getElementById('fileName6').textContent = '格式6Excel表格未上传';
      }
    }); document.getElementById('fileInput7').addEventListener('change', (event) => {
      if (this.file7 != event.target.files[0]) this.t7 = false;
      this.file7 = event.target.files[0];
      if (this.file7) {
        document.getElementById('fileName7').textContent = '✓已选择文件: ' + this.file7.name;
        console.log("文件已选择");
      } else {
        document.getElementById('fileName7').textContent = '格式7Excel表格未上传';
      }
    });
    document.getElementById('fileInput8').addEventListener('change', (event) => {
      if (this.file8 != event.target.files[0]) this.t8 = false;
      this.file8 = event.target.files[0];
      if (this.file8) {
        document.getElementById('fileName8').textContent = '✓已选择文件: ' + this.file8.name;
        console.log("文件已选择");
      } else {
        document.getElementById('fileName8').textContent = '格式8Excel表格未上传';
      }
    });
    document.getElementById('fileInput9').addEventListener('change', (event) => {
      if (this.file9 != event.target.files[0]) this.t9 = false;
      this.file9 = event.target.files[0];
      if (this.file9) {
        document.getElementById('fileName9').textContent = '✓已选择文件: ' + this.file9.name;
        console.log("文件已选择");
      } else {
        document.getElementById('fileName9').textContent = '格式9Excel表格未上传';
      }
    }); document.getElementById('fileInput10').addEventListener('change', (event) => {
      if (this.file10 != event.target.files[0]) this.t10 = false;
      this.file10 = event.target.files[0];
      if (this.file10) {
        document.getElementById('fileName10').textContent = '✓已选择文件: ' + this.file10.name;
        console.log("文件已选择");
      } else {
        document.getElementById('fileName10').textContent = '格式10Excel表格未上传';
      }
    });
    document.getElementById('fileInput11').addEventListener('change', (event) => {
      if (this.file11 != event.target.files[0]) this.t11 = false;
      this.file11 = event.target.files[0];
      if (this.file11) {
        document.getElementById('fileName11').textContent = '✓已选择文件: ' + this.file11.name;
        console.log("文件已选择");
      } else {
        document.getElementById('fileName11').textContent = '格式11Excel表格未上传';
      }
    });
    document.getElementById('fileInput12').addEventListener('change', (event) => {
      if (this.file12 != event.target.files[0]) this.t12 = false;
      this.file12 = event.target.files[0];
      if (this.file12) {
        document.getElementById('fileName12').textContent = '✓已选择文件: ' + this.file12.name;
        console.log("文件已选择");
      } else {
        document.getElementById('fileName12').textContent = '格式12Excel表格未上传';
      }
    });
  },
  methods: {
    async uploadFile() {
      if (!this.file1 && !this.file2 && !this.file3 && !this.file4 && !this.file5 && !this.file6 && !this.file7 && !this.file8 && !this.file9 && !this.file10 && !this.file11 && !this.file12) {
        alert('请先选择文件！');
        return;
      }
      if (this.file1) {
        let formData = new FormData();
        formData.append('file1', this.file1);
        try {
          let response = await fetch('http://localhost:8087/analyze', {//注：这里用到了基地址，整个前端工程两处引用基地址，这是第2处
            method: 'POST',
            body: formData
          });
          if (response.ok) {
            let result = await response.text();
            console.log('上传成功：' + result);//console
            this.t1 = true
            this.data1 = JSON.parse(result).items.map(item => ({
              name: item.text,    // 将text映射为name
              value: item.count   // 将count映射为value
            }));
          } else {
            console.error('上传失败:response.ok!=1');//fail
            this.t1 = false
          }
        } catch (error) {
          alert('上传出错:', error)
          console.error('上传出错:', error);//fail
          this.t1 = false
        }
      }
      if (this.file2) {
        let formData = new FormData();
        formData.append('file1', this.file2);
        try {
          let response = await fetch('http://localhost:8087/analyzeGroupAverage', {//注：这里用到了基地址，整个前端工程两处引用基地址，这是第2处
            method: 'POST',
            body: formData
          });
          if (response.ok) {
            let result = await response.text();
            console.log('上传成功：' + result);//console
            this.t2 = true
            this.data2name = Object.keys(JSON.parse(result)).filter(key => key !== "status");
            this.data2value = Object.values(JSON.parse(result)).filter(value => typeof value === "number");
          } else {
            console.error('上传失败:response.ok!=1');//fail
            this.t2 = false
          }
        } catch (error) {
          alert('上传出错:', error)
          console.error('上传出错:', error);//fail
          this.t2 = false
        }
      }
      if (this.file3) {
        let formData = new FormData();
        formData.append('file1', this.file3);
        try {
          let response = await fetch('http://localhost:8087/analyzeGroupStd', {//注：这里用到了基地址，整个前端工程两处引用基地址，这是第2处
            method: 'POST',
            body: formData
          });
          if (response.ok) {
            let result = await response.text();
            console.log('上传成功：' + result);//console
            this.t3 = true
            this.data3name = Object.keys(JSON.parse(result)).filter(key => key !== "status");
            this.data3value = Object.values(JSON.parse(result)).filter(value => typeof value === "number");
          } else {
            console.error('上传失败:response.ok!=1');//fail
            this.t3 = false
          }
        } catch (error) {
          alert('上传出错:', error)
          console.error('上传出错:', error);//fail
          this.t3 = false
        }
      }
      if (this.file4) {
        let formData = new FormData();
        formData.append('file1', this.file4);
        try {
          let response = await fetch('http://localhost:8087/analyzeShapiro', {//注：这里用到了基地址，整个前端工程两处引用基地址，这是第2处
            method: 'POST',
            body: formData
          });
          if (response.ok) {
            let result = await response.text();
            console.log('上传成功：' + result);//console
            this.t4 = true
            this.data4name = Object.keys(JSON.parse(result)).filter(key => key !== "status");
            this.data4w = Object.values(JSON.parse(result)).filter(item =>
              item && typeof item === 'object' && 'W' in item
            )
            this.data4w = this.data4w.map(item => item.W)
            this.data4p = Object.values(JSON.parse(result)).filter(item =>
              item && typeof item === 'object' && 'p' in item
            )
            this.data4p = this.data4p.map(item => item.p)
            console.log(this.data4w)
            console.log(this.data4p)
            this.initChart()
          } else {
            console.error('上传失败:response.ok!=1');//fail
            this.t4 = false
          }
        } catch (error) {
          alert('上传出错:', error)
          console.error('上传出错:', error);//fail
          this.t4 = false
        }
      }
      if (this.file5) {
        let formData = new FormData();
        formData.append('file1', this.file5);
        try {
          let response = await fetch('http://localhost:8087/analyzeVariance', {//注：这里用到了基地址，整个前端工程两处引用基地址，这是第2处
            method: 'POST',
            body: formData
          });
          if (response.ok) {
            let result = await response.text();
            console.log('上传成功：' + result);//console
            this.t5 = true
            this.data5f = JSON.parse(result).F
            this.data5p = JSON.parse(result).P
          } else {
            console.error('上传失败:response.ok!=1');//fail
            this.t5 = false
          }
        } catch (error) {
          alert('上传出错:', error)
          console.error('上传出错:', error);//fail
          this.t5 = false
        }
      }
      if (this.file6) {
        let formData = new FormData();
        formData.append('file1', this.file6);
        try {
          let response = await fetch('http://localhost:8087/analyzeAnova', {//注：这里用到了基地址，整个前端工程两处引用基地址，这是第2处
            method: 'POST',
            body: formData
          });
          if (response.ok) {
            let result = await response.text();
            console.log('上传成功：' + result);//console
            this.t6 = true
            this.data6f = JSON.parse(result).F
            this.data6p = JSON.parse(result).P
          } else {
            console.error('上传失败:response.ok!=1');//fail
            this.t6 = false
          }
        } catch (error) {
          alert('上传出错:', error)
          console.error('上传出错:', error);//fail
          this.t6 = false
        }
      }
      if (this.file7) {
        let formData = new FormData();
        formData.append('file1', this.file7);
        try {
          let response = await fetch('http://localhost:8087/analyzeTTest', {//注：这里用到了基地址，整个前端工程两处引用基地址，这是第2处
            method: 'POST',
            body: formData
          });
          if (response.ok) {
            let result = await response.text();
            console.log('上传成功：' + result);//console
            this.t7 = true
            this.data7name = Object.keys(JSON.parse(result).comparisons).filter(key => key !== "status");
            this.data7t = Object.values(JSON.parse(result).comparisons).map(item => item.t);
            this.data7p = Object.values(JSON.parse(result).comparisons).map(item => item.P);
            this.data7df = Object.values(JSON.parse(result).comparisons).map(item => item.df);
            console.log(this.data7t)
            console.log(this.data7p)
            console.log(this.data7df)
          } else {
            console.error('上传失败:response.ok!=1');//fail
            this.t7 = false
          }
        } catch (error) {
          alert('上传出错:', error)
          console.error('上传出错:', error);//fail
          this.t7 = false
        }
      }
      if (this.file8) {
        let formData = new FormData();
        formData.append('file1', this.file8);
        try {
          let response = await fetch('http://localhost:8087/analyzeNonParametricFull', {//注：这里用到了基地址，整个前端工程两处引用基地址，这是第2处
            method: 'POST',
            body: formData
          });
          if (response.ok) {
            let result = await response.text();
            console.log('上传成功：' + result);//console
            this.t8 = true
            this.data8name = Object.keys(JSON.parse(result).comparisons).filter(key => key !== "status");
            this.data8u = Object.values(JSON.parse(result).comparisons).map(item => item.U);
            this.data8z = Object.values(JSON.parse(result).comparisons).map(item => item.Z);
            this.data8p = Object.values(JSON.parse(result).comparisons).map(item => item.P);
            console.log(this.data8name)
            console.log(this.data8u)
            console.log(this.data8z)
            console.log(this.data8p)
          } else {
            console.error('上传失败:response.ok!=1');//fail
            this.t8 = false
          }
        } catch (error) {
          alert('上传出错:', error)
          console.error('上传出错:', error);//fail
          this.t8 = false
        }
      }
      if (this.file9) {
        let formData = new FormData();
        formData.append('file1', this.file9);
        try {
          let response = await fetch('http://localhost:8087/analyzeLinearRegression', {//注：这里用到了基地址，整个前端工程两处引用基地址，这是第2处
            method: 'POST',
            body: formData
          });
          if (response.ok) {
            const result = await response.text();
            console.log('上传成功：' + result);//console
            this.t9 = true
            if( JSON.parse(result).status!='error'){
              
              // 方法3：通过部分匹配键名来查找
            // 使用示例
            const regressionResult = JSON.parse(result)['线性回归结果'];
            this.t9_1 = this.findKeyByPartialMatch(regressionResult, '截距');  // 31.199875
            this.t9_2 = this.findKeyByPartialMatch(regressionResult, '斜率');   // 0.487228
            this.t9_3 = this.findKeyByPartialMatch(regressionResult, '决定系数'); // 0.090035
            this.t9_4 = this.findKeyByPartialMatch(regressionResult, 'P');      // 0.369987
            this.t9_5 = this.findKeyByPartialMatch(regressionResult, '显著性');  // "否"
            this.t9_6 = this.findKeyByPartialMatch(regressionResult, '回归');  // "否"
            this.t9_6 = `y = ${this.t9_2.toFixed(3)}x + ${this.t9_1.toFixed(3)}`;
            console.log(this.data8name)
            console.log(this.data8u)
            console.log(this.data8z)
            console.log(this.data8p)
            }else{
              this.e9= '错误：'+JSON.parse(result).message
              this.t9=false
            }
            
          } else {
            console.error('上传失败:response.ok!=1');//fail
            this.t9 = false
            this.e9='上传失败:response.ok!=1'
          }
        } catch (error) {
          console.error('上传出错:', error);//fail
          this.t9 = false
          this.e9='上传出错:', error;
        }
      }
      // if (this.file10) {
      //   let formData = new FormData();
      //   formData.append('file1', this.file10);
      //   try {
      //     let response = await fetch('http://localhost:8087/cluster', {//注：这里用到了基地址，整个前端工程两处引用基地址，这是第2处
      //       method: 'POST',
      //       body: formData
      //     });
      //     if (response.ok) {
      //       const result = await response.json();
      //       console.log('聚类分析结果:', result);
      //             this.data10features = result.聚类结果[0]?.特征名称 || [];
      //       // 保存原始数据
      //       this.clusterData = result;
      //       // 更新雷达图
      //       this.$nextTick(() => {
      //         this.updateRadarChart();
      //       });
      //       this.t10 = true
      //     } else {
      //       console.error('上传失败:response.ok!=1');//fail
      //       this.t10 = false
      //     }
      //   } catch (error) {
      //     console.error('上传出错:', error);//fail
      //     this.t10 = false
      //   }
      // }
      if (this.file10) {
  let formData = new FormData();
  formData.append('file1', this.file10);
  try {
    let response = await fetch('http://localhost:8087/cluster', {
      method: 'POST',
      body: formData
    });
    if (response.ok) {
      const result = await response.json();
      console.log('聚类分析结果:', result);
      
      // 修复：正确设置 data10features
      if (result.聚类结果 && result.聚类结果.length > 0) {
        this.data10features = result.聚类结果[0].特征名称 || [];
      } else {
        this.data10features = [];
      }
      
      // 保存原始数据
      this.clusterData = result;
      this.t10 = true;
      
      // 先更新图表数据，再渲染雷达图
      this.updateChartOptions();
      this.$nextTick(() => {
        this.updateRadarChart();
      });
    } else {
      console.error('上传失败:response.ok!=1');
      this.t10 = false;
    }
  } catch (error) {
    alert('上传出错:', error)
    console.error('上传出错:', error);
    this.t10 = false;
  }
}
      if (this.file11) {
        let formData = new FormData();
        formData.append('file1', this.file11);
        try {
          let response = await fetch('http://localhost:8087/chi-square', {//注：这里用到了基地址，整个前端工程两处引用基地址，这是第2处
            method: 'POST',
            body: formData
          });
          if (response.ok) {
            let result = await response.text();
            console.log('上传成功：' + result);//console
            this.t11 = true
            this.t11k2 = JSON.parse(result).chiSquare
            this.t11df = JSON.parse(result).df
            this.t11p = JSON.parse(result).pValue
            this.t11significant = JSON.parse(result).isSignificant
            this.t11interpretation = JSON.parse(result).interpretation
          } else {
            console.error('上传失败:response.ok!=1');//fail
            this.t11 = false
          }
        } catch (error) {
          alert('上传出错:', error)
          console.error('上传出错:', error);//fail
          this.t11 = false
        }
      }
      if (this.file12) {
        let formData = new FormData();
        formData.append('file1', this.file12);
        try {
          let response = await fetch('http://localhost:8087/association-rule', {//注：这里用到了基地址，整个前端工程两处引用基地址，这是第2处
            method: 'POST',
            body: formData
          });
          if (response.ok) {
            let result = await response.json();
            console.log('关联规则分析结果:', result);
            this.associationData = result;
            this.associationRules = result.关联规则结果 || [];
            this.t12 = true;
          } else {
            console.error('关联规则分析失败');
            this.t12 = false;
          }
        } catch (error) {
          alert('关联规则分析出错:', error)
          console.error('关联规则分析出错:', error);
          this.t12 = false;
        }
      }
      this.updateChartOptions();
    },
    findKeyByPartialMatch(obj, partialKey) {
      const keys = Object.keys(obj);
      const foundKey = keys.find(key => key.includes(partialKey));
      return foundKey ? obj[foundKey] : null;
    },
    updateChartOptions() {
      this.data2value=Object.values(this.data2value).map(num => Math.round(num * 1000) / 1000)
            this.data3value=Object.values(this.data3value).map(num => Math.round(num * 1000) / 1000)
     
      this.data4p=Object.values(this.data4p).map(num => Math.round(num * 1000) / 1000)
      this.data4w=Object.values(this.data4w).map(num => Math.round(num * 1000) / 1000)
            this.data5=Object.values(this.data5).map(num => Math.round(num * 1000) / 1000)
      this.data6=Object.values(this.data6).map(num => Math.round(num * 1000) / 1000)
            this.data7p=Object.values(this.data7p).map(num => Math.round(num * 1000) / 1000)
      this.data7t=Object.values(this.data7t).map(num => Math.round(num * 1000) / 1000)
            this.data7df=Object.values(this.data7df).map(num => Math.round(num * 1000) / 1000)
      this.data8u=Object.values(this.data8u).map(num => Math.round(num * 1000) / 1000)
            this.data8z=Object.values(this.data8z).map(num => Math.round(num * 1000) / 1000)
      this.data8p=Object.values(this.data8p).map(num => Math.round(num * 1000) / 1000)
            this.data9t=Object.values(this.data9t).map(num => Math.round(num * 1000) / 1000)
 
      this.$set(this.option1.series[0], 'data', this.data1);
      this.$set(this.option2.series[0], 'data', this.data2value);
      this.$set(this.option2.xAxis, 'data', this.data2name);
      this.$set(this.option3.series[0], 'data', this.data3value);
      this.$set(this.option3.xAxis, 'data', this.data3name);
      // this.$set(this.option4.xAxis, 'data', this.data4name);
      // this.$set(this.option4.series[0], 'data', this.data4w);
      // this.$set(this.option4.series[1], 'data', this.data4p);
      this.$set(this.option5.series[0], 'data', this.data5);
      this.$set(this.option6.series[0], 'data', this.data6);
      this.$set(this.option7.xAxis, 'data', this.data7name);
      this.$set(this.option7.series[0], 'data', this.data7t);
      this.$set(this.option7.series[1], 'data', this.data7p);
      this.$set(this.option7.series[2], 'data', this.data7df);
      this.$set(this.option8.yAxis, 'data', [this.data8name[0], this.data8name[1], this.data8name[2]]);
      this.$set(this.option8.series[0], 'data', this.data8u);
      this.$set(this.option8.series[1], 'data', this.data8z);
      this.$set(this.option8.series[2], 'data', this.data8p);
      this.$set(this.option9.series[1], 'data', this.t9_6);
      let data9t = [[0, this.t9_1], [(100-this.t9_1)/(this.t9_2).toFixed(2), 100]]
      this.$set(this.option9.series[1], 'data', data9t);
      this.$set(this.option10.radar, 'indicator', this.data10features.map(name => name));
 this.$set(this.option4, 'series', this.data4series);
    },



    // 获取关系样式类
    getRelationClass(relation) {
      switch (relation) {
        case '正相关': return 'positive-relation';
        case '负相关': return 'negative-relation';
        case '无关联': return 'no-relation';
        default: return '';
      }
    },
    // 在你的Vue组件中
    updateRadarChart() {
      const radarData = this.processClusterData(); // 处理上面提取的数据
       this.$set(this.option10 = {
        title: {
          text: '聚类分析雷达图',
          subtext: `样本总数: ${radarData.sampleCount} | 聚类数: ${radarData.clusterCount}`
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          data: radarData.clusterNames,
          bottom: 10
        },
        radar: {
          indicator: radarData.dimensions.map(dim => ({
            name: dim,
            max: Math.max(...radarData.seriesData.map(series => Math.max(...series.value))) * 1.2 // 动态最大值
          }))
        },
        series: [{
          name: '聚类中心对比',
          type: 'radar',
          data: radarData.seriesData.map((series, index) => ({
            ...series,
            areaStyle: {
              color: this.getClusterColor(index) // 自定义颜色函数
            },
            lineStyle: {
              width: 2
            }
          }))
        }]
      });
    },
    // 数据处理函数
    processClusterData() {
      const rawData = this.clusterData; // 你的后端返回数据
      // 提取维度名称
      const dimensions = rawData.聚类结果[0]?.特征名称 || [];
      // 过滤有效聚类（成员数>0）
      const validClusters = rawData.聚类结果.filter(cluster => cluster.成员数 > 0);
      // 准备雷达图数据系列
      const seriesData = validClusters.map((cluster, index) => ({
        name: `${cluster.类别编号} (${cluster.成员数}个样本)`,
        value: cluster['聚类中心（按列顺序）'].map(center => parseFloat(center))
      }));
      return {
        dimensions: dimensions,
        seriesData: seriesData,
        clusterNames: validClusters.map(cluster => cluster.类别编号),
        sampleCount: rawData.概要信息.样本总数,
        clusterCount: validClusters.length
      };
    },
    // 聚类颜色配置
    getClusterColor(index) {
      const colors = [
        'rgba(255, 99, 132, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(255, 206, 86, 0.6)',
        'rgba(75, 192, 192, 0.6)',
        'rgba(153, 102, 255, 0.6)',
        'rgba(255, 159, 64, 0.6)'
      ];
      return colors[index % colors.length];
    },
//=====================正态分布Begin
generateNormalDistribution(mean, stdDev, points = 200) {
      const data = [];
      const min = mean - 4 * stdDev;
      const max = mean + 4 * stdDev;
      const step = (max - min) / points;
      
      for (let x = min; x <= max; x += step) {
        const y = (1 / (stdDev * Math.sqrt(2 * Math.PI))) * 
                  Math.exp(-0.5 * Math.pow((x - mean) / stdDev, 2));
        data.push([x, y]);
      }
      return data;
    },
        generateConfidenceIntervals(mean, stdDev) {
      const intervals = {};
      [1, 2].forEach(level => {
        const data = [];
        const min = mean - level * stdDev;
        const max = mean + level * stdDev;
        const points = 100;
        const step = (max - min) / points;
        
        for (let x = min; x <= max; x += step) {
          const y = (1 / (stdDev * Math.sqrt(2 * Math.PI))) * 
                    Math.exp(-0.5 * Math.pow((x - mean) / stdDev, 2));
          data.push([x, y]);
        }
        intervals[level] = data;
      });
      return intervals;
    },
     getNormalityClass(result) {
      if (result.W >= 0.9 && result.P >= 0.05) return 'normal';
      if (result.W >= 0.8) return 'moderate';
      return 'non-normal';
    },

    getNormalityText(result) {
      if (result.W >= 0.9 && result.P >= 0.05) return '符合正态分布';
      if (result.W >= 0.8) return '近似正态分布';
      return '不符合正态分布';
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      
      const series = [];
      const colors = ['#5470c6', '#91cc75', '#fac858'];
      
      Object.keys(this.normalityTestResults).forEach((group, index) => {
        const result = this.normalityTestResults[group];
        const intervals = this.generateConfidenceIntervals(result.mean, result.stdDev);
        
        // 置信区间
        [2, 1].forEach((level, i) => {
          series.push({
            name: `${group} - ${level}σ区间`,
            type: 'line',
            data: intervals[level],
            lineStyle: { width: 0 },
            areaStyle: { color: `rgba(84, 112, 198, ${0.3 - i * 0.2})` },
            stack: `confidence${index}`,
            z: i + 1
          });
        });
        
        // 主曲线
        series.push({
          name: `${group} (W=${result.W}, P=${result.P})`,
          type: 'line',
          smooth: true,
          data: this.generateNormalDistribution(result.mean, result.stdDev),
          lineStyle: { width: 3, color: colors[index] },
          z: 3
        });

        this.data4series=series;
      });

    //  this.option4 = {
    //     title: {
    //       text: '基于Shapiro-Wilk检验的正态分布曲线',
    //       subtext: '阴影区域表示置信区间（1σ: 68.27%, 2σ: 95.45%）',
    //       left: 'center'
    //     },
    //     tooltip: { trigger: 'axis' },
    //     legend: { top: 40 },
    //     xAxis: { type: 'value', name: '数据值' },
    //     yAxis: { type: 'value', name: '概率密度' },
    //     series: series
    //   };


    }

//=====================正态分布End
  }
}



</script>
<style>
.uploadFile div {
  transition: 0.3s;
  border-radius: 4px;
}

.uploadFile:hover div {
  font-size: 25px;
  font-weight: 600;
  background-color: skyblue;
  color: #fff;
}


/* 关联规则特定样式 */
.association-metrics-panel {
  width: 100%;
  max-width: 1200px;

  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.metric-card {
  background: white;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #5470c6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.rule-header {
  font-weight: bold;
  font-size: 16px;
  color: #5470c6;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}

.metric-item {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  padding: 4px 0;
}

.metric-item .label {
  font-weight: 500;
  color: #666;
}

.metric-item .value {
  font-weight: 600;
  color: #333;
}

.positive-relation {
  color: #91cc75;
}

.negative-relation {
  color: #ee6666;
}

.no-relation {
  color: #999;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .association-metrics-panel {
    margin: 10px;
    padding: 15px;
  }
}
table td {

    padding: 10px 30px;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    border-right: 1px solid #999;

}
.label1 {
  margin: 20px 0 20px 10px;
  font-size: 27px;
  border-left: solid 9px #006308;
  text-indent: 5px;
  line-height: 35px;
  width: 200px;
}
</style>